<template>
  <div v-if="show">
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称" width="200px" align="left">
        <template slot-scope="scope">
          <div>
            {{ scope.row.name }}
            <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="right">
              <span><i class="el-icon-warning-outline" /></span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="值">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.value }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="small" @click="handleClipboard(scope.row.value,$event)">复制</el-button>
            <template v-if="scope.$index>0">
              <el-button type="warning" size="small" @click="handleCreate(scope.$index)">生成</el-button>
              <el-button type="danger" size="small" @click="handleEdit(scope.$index)">修改</el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getPlaid } from '@/utils/auth'
import { editWechatMessage, getWechatMessage } from '@/api/platform/wechat'
import clipboard from '@/utils/clipboard'
export default {
  name: 'WechatMessageCard',
  props: {},
  data() {
    return {
      plaid: getPlaid(),
      messageData: {},
      show: false
    }
  },
  computed: {
    tableData() {
      return [
        {
          title: '服务器地址',
          name: 'URL',
          value: this.messageData.api_url
        },
        {
          title: '令牌',
          name: 'Token',
          field: 'token',
          value: this.messageData.token
        },
        {
          title: '消息加解密密钥',
          name: 'EncodingAESKey',
          field: 'encodingaeskey',
          value: this.messageData.encodingaeskey
        }
      ]
    }
  },
  mounted() {
    getWechatMessage(this.plaid).then(res => {
      this.messageData = res.data
      this.show = true
    }).catch(res => {
    })
  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    handleEdit(index) {
      this.$prompt('请输入' + this.tableData[index].title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.messageData[this.tableData[index].field] = value
        editWechatMessage(this.plaid, this.messageData).then(res => {
          this.$message.success(res.msg)
        })
      }).catch(res => {})
    },
    handleCreate(index) {
      this.$confirm('是否要生成新的' + this.tableData[index].title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let len = 32
        if (index === 2) { len = 43 }
        this.messageData[this.tableData[index].field] = this.randomString(len)
        editWechatMessage(this.plaid, this.messageData).then(res => {
          this.$message.success(res.msg)
        })
      }).catch(() => {

      })
    },
    randomString(len) {
      len = len || 32
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = $chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    }
  }
}
</script>

<style scoped lang="scss">

</style>
